<template>
	<div>
		<mj-title type="h2" title="Input 输入框"></mj-title>
		<div class="page-desc">通过鼠标或键盘输入内容，是最基础的表单域的包装。</div>

		<mj-divider>前缀和后缀图标</mj-divider>
	    <div class="input">
	        <mj-input placeholder="请输入" prefix="icon-user"></mj-input>
	        <mj-input placeholder="请输入" suffix="icon-date"></mj-input>
			<pre>
				<code class="language-html line-numbers">
				&lt;template>
					&lt;mj-input placeholder="请输入" prefix="icon-user">&lt;/mj-input>
					&lt;mj-input placeholder="请输入" suffix="icon-date">&lt;/mj-input>
				&lt;/template>
				</code>
			</pre>
	    </div>

		<mj-divider>双向绑定</mj-divider>
	    <div class="input">
	        <mj-input placeholder="双向绑定" v-model="value" style="display:inline-block"></mj-input><div style="margin:5px;display:inline-block">{{value}}</div>
	        <mj-button hollow icon="refresh" @click="reset">重置</mj-button>
			<pre>
				<code class="language-html line-numbers">
				&lt;template>
					&lt;mj-input placeholder="双向绑定" v-model="value">&lt;/mj-input>
				&lt;/template>
				&lt;script>
				export default {
					data() {
						return {
							value: 'v-model双向绑定',
						}
					}
				}
				&lt;/script>
				</code>
			</pre>
	    </div>

		<mj-divider>显示清空按钮</mj-divider>
	    <div class="input">
	        <mj-input placeholder="显示清空按钮" :clear-icon="true" v-model="value2"></mj-input>
			<pre>
				<code class="language-html line-numbers">
				&lt;template>
					&lt;mj-input placeholder="显示清空按钮" :clear-icon="true" v-model="value2">&lt;/mj-input>
				&lt;/template>
				&lt;script>
				export default {
					data() {
						return {
							value2:'clear text'
						}
					}
				}
				&lt;/script>
				</code>
			</pre>
	    </div>

		<mj-divider>禁用状态</mj-divider>
	    <div class="input">
	        <mj-input placeholder="disabled" :disabled="true"></mj-input>
			<pre>
				<code class="language-html line-numbers">
				&lt;template>
					&lt;mj-input placeholder="disabled" :disabled="true">&lt;/mj-input>
				&lt;/template>
				</code>
			</pre>
	    </div>

		<mj-divider>只读状态</mj-divider>
	    <div class="input">
	        <mj-input placeholder="readonly" :readonly="true"></mj-input>
			<pre>
				<code class="language-html line-numbers">
				&lt;template>
					&lt;mj-input placeholder="readonly" :readonly="true">&lt;/mj-input>
				&lt;/template>
				</code>
			</pre>
	    </div>

		<mj-divider>密码框</mj-divider>
	    <div class="input">
	        <mj-input placeholder="请输入密码" :show-eye="true" value="请输入密码" type="password"></mj-input>
			<pre>
				<code class="language-html line-numbers">
				&lt;template>
					&lt;mj-input placeholder="请输入密码" :show-eye="true" value="请输入密码" type="password">&lt;/mj-input>
				&lt;/template>
				</code>
			</pre>
	    </div>

		<mj-divider>最大输入长度</mj-divider>
	    <div class="input">
	        <mj-input placeholder="请输入" value="" :max-length="10"></mj-input>
			<pre>
				<code class="language-html line-numbers">
				&lt;template>
					&lt;mj-input placeholder="请输入" value="" :max-length="10">&lt;/mj-input>
				&lt;/template>
				</code>
			</pre>
	    </div>

	 	<mj-divider>search</mj-divider>
	    <div class="input">
	        <mj-input placeholder="搜索框" value="" search @click="_searchClick"></mj-input>
			<pre>
				<code class="language-html line-numbers">
				&lt;template>
					&lt;mj-input placeholder="搜索框" value="" search @click="_searchClick">&lt;/mj-input>
				&lt;/template>
				&lt;script>
				export default {
					methods:{
						_searchClick(val){
							console.log(val)
						},
					}
				}
				&lt;/script>				
				</code>
			</pre>
	    </div>

		<mj-divider>尺寸</mj-divider>
	    <div class="input">
	        <mj-input placeholder="large" size="large" style="width:180px;display: inline-block;" suffix="icon-date"></mj-input>
	        <mj-input placeholder="default" style="width:180px;display: inline-block;margin:0 20px;" suffix="icon-date"></mj-input>
	        <mj-input placeholder="small" size="small" style="width:180px;display: inline-block;" suffix="icon-date"></mj-input>
			<pre>
				<code class="language-html line-numbers">
				&lt;template>
					&lt;mj-input placeholder="large" size="large">&lt;/mj-input>
					&lt;mj-input placeholder="default">&lt;/mj-input>
					&lt;mj-input placeholder="small" size="small">&lt;/mj-input>
				&lt;/template>
				</code>
			</pre>
	    </div>

		<mj-divider>文本域</mj-divider>
	    <div class="input">
	    	<mj-form>
			    <mj-form-item label="自动高度">
					<mj-switch v-model="autosize"></mj-switch>
			    </mj-form-item>
			</mj-form>
	        <mj-input placeholder="请输入" :disabled="true" type="textarea" :max-length="100" :autosize="autosize" style="width:100%;"></mj-input>
			<pre>
				<code class="language-html line-numbers">
				&lt;template>
					&lt;mj-input placeholder="请输入" type="textarea" :max-length="100" :autosize="autosize">&lt;/mj-input>
				&lt;/template>
				&lt;script>
				export default {
					data() {
						return {
							autosize: false
						}
					}
				}
				&lt;/script>
				</code>
			</pre>
	    </div>

		<mj-divider>复合型输入框</mj-divider>
	    <div class="input">
	        <mj-input placeholder="请输入">
	        	<template slot="prepend">Http://</template>
	        </mj-input>
	        <mj-input placeholder="请输入">
	        	<mj-button type="primary" icon="search" slot="append"></mj-button>
	        </mj-input>
	        <mj-input placeholder="请输入">
	        	<template slot="append">.com</template>
	        </mj-input>
			<pre>
				<code class="language-html line-numbers">
				&lt;template>
						&lt;mj-input placeholder="请输入">
							&lt;template slot="prepend">Http://&lt;/template>
						&lt;/mj-input>
						&lt;mj-input placeholder="请输入">
							&lt;mj-button type="primary" icon="search" slot="append">&lt;/mj-button>
						&lt;/mj-input>
						&lt;mj-input placeholder="请输入">
							&lt;template slot="append">.com&lt;/template>
						&lt;/mj-input>
					&lt;/template>
				</code>
			</pre>
	    </div>

		<mj-divider>获得焦点事件(控制台输出)</mj-divider>
	    <div class="input">
	        <mj-input placeholder="获得焦点事件(控制台输出)" @focus="_focus"></mj-input>
			<pre>
				<code class="language-html line-numbers">
				&lt;template>
					&lt;mj-input placeholder="获得焦点事件(控制台输出)" @focus="_focus">&lt;/mj-input>
				&lt;/template>
				&lt;script>
				export default {
					methods:{
						_focus(e){
							console.log(e)
						},
					}
				}
				&lt;/script>				
				</code>
			</pre>
	    </div>

		<mj-divider>失去焦点事件(控制台输出)</mj-divider>
	    <div class="input">
	        <mj-input placeholder="失去焦点事件(控制台输出)" @blur="_blur"></mj-input>
			<pre>
				<code class="language-html line-numbers">
				&lt;template>
					&lt;mj-input placeholder="失去焦点事件(控制台输出)" @blur="_blur">&lt;/mj-input>
				&lt;/template>
				&lt;script>
				export default {
					methods:{
						_blur(e){
							console.log(e)
						},
					}
				}
				&lt;/script>
				</code>
			</pre>
	    </div>

		<mj-divider>input事件(控制台输出)</mj-divider>
	    <div class="input">
	        <mj-input placeholder="input事件(控制台输出)" @input="_input"></mj-input>
			<pre>
				<code class="language-html line-numbers">
				&lt;template>
					&lt;mj-input placeholder="input事件(控制台输出)" @input="_input">&lt;/mj-input>
				&lt;/template>
				&lt;script>
				export default {
					methods:{
						_input(e){
							console.log(e)
						},
					}
				}
				&lt;/script>
				</code>
			</pre>
	    </div>

		<mj-divider>keyup，keydown事件(控制台输出)</mj-divider>
	    <div class="input">
	        <mj-input placeholder="keyup，keydown事件(控制台输出)" @keyup="_keyup" @keydown="_keydown"></mj-input>
			<pre>
				<code class="language-html line-numbers">
				&lt;template>
					&lt;mj-input placeholder="keyup，keydown事件(控制台输出)" @keyup="_keyup" @keydown="_keydown">&lt;/mj-input>
				&lt;/template>
				&lt;script>
				export default {
					methods:{
						_keyup(e){
							console.log(e)
						},
					}
				}
				&lt;/script>
				</code>
			</pre>
	    </div>

		<mj-title type="h5" title="API"></mj-title>
		<mj-title type="h6" title="Input 参数"></mj-title>
		<table class="api-table">

			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>name</td>
					<td>input name 值</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>type</td>
					<td>输入框类型，可选值为<code>password</code>、<code>text</code>、<code>textarea</code></td>
					<td>String</td>
					<td>text</td>
				</tr>
				<tr>
					<td>value</td>
					<td>绑定的值，可使用 v-model 双向绑定</td>
					<td>String | Number</td>
					<td>-</td>
				</tr>
				<tr>
					<td>placeholder</td>
					<td>占位文本</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>clear-icon</td>
					<td>是否显示清空按钮</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>disabled</td>
					<td>设置输入框为禁用状态</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>readonly</td>
					<td>设置输入框为只读</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>show-eye</td>
					<td>是否显示切换密码图标</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>prefix</td>
					<td>输入框头部图标</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>suffix</td>
					<td>输入框尾部图标</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>maxlength</td>
					<td>最大输入长度</td>
					<td>Number</td>
					<td>-</td>
				</tr>
				<tr>
					<td>rows</td>
					<td>文本域默认行数，仅在 textarea 类型下有效</td>
					<td>Number</td>
					<td>2</td>
				</tr>
				<tr>
					<td>autosize</td>
					<td>自适应内容高度，仅在 textarea 类型下有效。可传入对象，如 { minRows: 2, maxRows: 6 }</td>
					<td>Boolean | Object</td>
					<td>false</td>
				</tr>
				<tr>
					<td>search</td>
					<td>是否显示为搜索型输入框，配合<code>@searchClick</code>事件获得vlaue，回车也能触发</td>
					<td>Boolean</td>
					<td>flase</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Input 事件"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>事件名</th>
					<th>说明</th>
					<th>返回值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>focus</td>
					<td>输入框聚焦时触发</td>
					<td>event</td>
				</tr>
				<tr>
					<td>blur</td>
					<td>输入框失去焦点时触发</td>
					<td>event</td>
				</tr>
				<tr>
					<td>keyup</td>
					<td>原生的 keyup 事件</td>
					<td>event</td>
				</tr>
				<tr>
					<td>keydown</td>
					<td>原生的 keydown 事件</td>
					<td>event</td>
				</tr>
				<tr>
					<td>input</td>
					<td>输入框输入时候的内容</td>
					<td>value</td>
				</tr>
				<tr>
					<td>searchClick</td>
					<td>搜索事件，需使用参数<code>search</code></td>
					<td>value</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Input Slot插槽"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>名称</th>
					<th>说明</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>prepend</td>
					<td>前置内容</td>
				</tr>
				<tr>
					<td>append</td>
					<td>后置内容</td>
				</tr>
			</tbody>
		</table>	
	</div>
</template>

<script>
export default {
	data() {
		return {
			value: 'v-model双向绑定',
			value2:'clear text',
			autosize:false,
		}
	},
	methods:{
		_focus(e){
			console.log(e)
		},
		_blur(e){
			console.log(e)
		},
		_input(e){
			console.log(e)
		},
		_keyup(e){
			console.log(e)
		},
		_keydown(e){
			console.log(e)
		},
		_searchClick(val){
	      this.$alert(val)
		},
		reset() {
			this.value = ''
		}
	}
}
</script>

<style>
.input {margin-bottom: 50px;}
.input .mj-input {width:300px;margin-bottom: 6px;}
</style>